<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <el-button type="text" @click="dialogFormVisible = true">添加排班</el-button>
        <el-table :data="tableData" style="width: 100%" max-height="350">
            <el-table-column fixed type="index" width="50"></el-table-column>
            <el-table-column fixed prop="hoscode" label="医院编号" width="120"></el-table-column>
            <el-table-column fixed prop="depcode" label="科室编号" width="120"></el-table-column>
            <el-table-column prop="title" label="职称" width="120"></el-table-column>
            <el-table-column prop="docname" label="医生名称" width="120"></el-table-column>
            <el-table-column prop="workDate" label="安排日期" width="120"></el-table-column>
            <el-table-column prop="workTime" label="安排时间" width="100"></el-table-column>
            <el-table-column prop="reservedNumber" label="可预约数" width="100"></el-table-column>
            <el-table-column prop="availableNumber" label="剩余预约数" width="100"></el-table-column>
            <el-table-column prop="amount" label="挂号费" width="90"></el-table-column>
            <el-table-column prop="hosScheduleId" label="排班编号" width="100"></el-table-column>
            <el-table-column prop="skill" label="擅长技能" width="300"></el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                    <el-button type="text" size="small"
                            @click.native.prevent="deleteRow(scope.$index, scope.row)">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="width: 93%;text-align: right;">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <el-dialog title="添加排班" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="排班编号" :label-width="formLabelWidth">
                    <el-input v-model="form.hosScheduleId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="科室编号" :label-width="formLabelWidth">
                    <el-input v-model="form.depcode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="医生姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.docname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="职称" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="安排日期" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.workDate" type="date"
                                    placeholder="选择日期" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="安排时间" :label-width="formLabelWidth">
                    <el-select v-model="form.workTime" placeholder="请选择安排时间">
                        <el-option label="上午" value="0"></el-option>
                        <el-option label="下午" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="可预约数" :label-width="formLabelWidth">
                    <el-input type="number" v-model="form.reservedNumber" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="剩余预约数" :label-width="formLabelWidth">
                    <el-input type="number"  v-model="form.availableNumber" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="挂号费" :label-width="formLabelWidth">
                    <el-input v-model="form.amount" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="擅长技能" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.skill" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onsubmitSchedule">确 定</el-button>
            </div>
        </el-dialog>
    </div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            // 表格数据
            tableData: [],
            currentPage: 1,
            pageSize: 5,
            total: 0,
            dialogFormVisible: false,
            form: {},
            formLabelWidth: '120px',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now();
                }
            }
        },
        methods: {
            // 分页的方法
            showScheduleList () {
                // 封装参数
                let pageable = {
                    currentPage: this.currentPage,
                    limit: this.pageSize
                }
                axios.post(`/hospitalSet/pagingSchedule`, pageable).then( ({data}) => {
                    // console.log(data)
                    if (data.code == 200) {
                        this.tableData = data.data.content
                        this.total = data.data.totalElements
                    } else {
                        this.$message({
                            showClose: true,
                            message: data.code + ': 出现未知错误，请稍后再试!',
                            type: 'error'
                        })
                    }
                }).catch(e => {
                    this.$message({
                        showClose: true,
                        message: '出现未知错误！',
                        type: 'error'
                    })
                })
            },
            // 改变当前页时触发
            handleCurrentChange(val) {
                this.currentPage = val
                this.showScheduleList()
            },
            // 删除当前行数据的方法
            deleteRow(index, rows) {
                this.$confirm('确定要移除 '+rows.docname+' 的排班吗? 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(`/hospitalSet/delSchedule/${rows.depcode}/${rows.hosScheduleId}`).then(({data}) => {
                        if (data.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '移除成功!'
                            })
                        } else {
                            this.$message.error("移除错误，请稍后再试！")
                        }
                        this.showScheduleList()
                    }).catch( e => {
                        this.$message.error("移除错误，请稍后再试！")
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消移除'
                    });
                })
            },
            // 添加科室
            onsubmitSchedule () {
                this.$confirm('确定添加该排班吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 获取编号
                    this.form.hoscode = sessionStorage.getItem("hoscode")
                    this.form.workDate = this.formatDate(this.form.workDate)
                    console.log(this.form)
                    axios.post(`/hospitalSet/addSchedule`,this.form).then(({data}) => {
                        if (data.code == 200){
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                            this.dialogFormVisible = false
                            this.showScheduleList()
                        } else {
                            this.$message.error("提交错误，请稍后再试！")
                        }
                    }).catch( e =>{
                        this.$message.error("提交错误，请稍后再试！")
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消添加'
                    });
                })
            },
            formatDate(data) {
                let date = new Date(data); //转换成Data();
                let y = date.getFullYear()
                let m = date.getMonth() + 1
                m = m < 10 ? '0' + m : m
                let d = date.getDate()
                d = d < 10 ? ('0' + d) : d
                return y + '-' + m + '-' + d
            }
        },
        created () {
            this.showScheduleList()
        }
    })
</script>
</body>
</html>